<template>
  <div class="layout">
    <!-- 一行一个 -->
    <div
      v-if="goodsData.goodsType === 'one'"
      class="goods-item flex goods-item-one-row"
      v-for="(item, item_index) in props.model || res.data.list"
      @click="handleClick(item)"
      :key="item_index">
      <div class="goods-item-img-row" v-if="item.img">
        <img style="width: 300rpx; height: 300rpx" :src="item.img" mode="aspectFit" />
      </div>
      <div class="goods-item-desc-row" v-if="item.img">
        <div class="goods-title no-clamp">
          {{ item.goodsName }}
        </div>

        <div class="goods-bottom">
          <div class="goods-price text-main-color">
            ¥
            <span>{{ goodsFormatPrice(item.price)[0] }}</span>
            .{{ goodsFormatPrice(item.price)[1] }}
          </div>
        </div>
      </div>
    </div>

    <!-- 一行多个模式 -->
    <div class="goods-list" v-if="goodsData.goodsType !== 'scroll'">
      <div
        v-if="goodsData.goodsType !== 'one'"
        @click="handleClick(item)"
        class="goods-item"
        v-for="(item, item_index) in props.model || res.data.list"
        :key="item_index"
        :class="{
          two: goodsData.goodsType === 'two',
          three: goodsData.goodsType === 'three',
          ___big: goodsData.goodsType === 'big' || item.___big,
          scroll: goodsData.goodsType === 'scroll',
          flag: goodsData.goodsType === 'flag'
        }">
        <div
          class="goods-img"
          v-if="item.img && goodsData.goodsType === 'big'"
          :style="{ height: px2rpx(goodsData.bigImage) + 'rpx' }">
          <image
            :src="item.img"
            :style="{ height: px2rpx(goodsData.bigImage) + 'rpx', width: '100%' }"
            mode="aspectFit"></image>
        </div>
        <div class="goods-img" v-if="item.img && goodsData.goodsType !== 'big'">
          <image
            :src="item.img"
            :style="{ height: goodsData.num[goodsData.goodsType] + 'rpx', width: '100%' }"
            mode="aspectFit"></image>
        </div>

        <div class="goods-desc" v-if="item.img">
          <div class="goods-title">
            {{ item.goodsName }}
          </div>
          <div class="lineation-price text-main-color" v-if="item.cost">
            ¥
            <span>{{ goodsFormatPrice(item.cost)[0] }}</span>
            .{{ goodsFormatPrice(item.cost)[1] }}
          </div>
          <div class="goods-bottom">
            <div class="goods-price text-main-color">
              ¥
              <span>{{ goodsFormatPrice(item.price)[0] }}</span>
              .{{ goodsFormatPrice(item.price)[1] }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 横向滚动 -->
    <scroll-view
      :scroll-x="true"
      :scroll-with-animation="true"
      class="goods-list"
      style="white-space: nowrap"
      v-if="goodsData.goodsType === 'scroll'">
      <div
        v-if="goodsData.goodsType !== 'one'"
        @click="handleClick(item)"
        class="goods-item three"
        style="display: inline-block"
        v-for="(item, item_index) in props.model || res.data.list"
        :key="item_index">
        <div class="goods-img">
          <image
            :src="item.img"
            :style="{ height: goodsData.num[item.goodsType] + 'rpx', width: '100%' }"
            mode="aspectFit"></image>
        </div>
        <div class="goods-desc">
          <div class="goods-title wes">
            {{ item.goodsName }}
          </div>
          <div class="lineation-price" v-if="item.cost">
            ¥
            <span>{{ goodsFormatPrice(item.cost)[0] }}</span>
            .{{ goodsFormatPrice(item.cost)[1] }}
          </div>
          <div class="goods-bottom">
            <div class="goods-price text-main-color">
              ¥
              <span>{{ goodsFormatPrice(item.price)[0] }}</span>
              .{{ goodsFormatPrice(item.price)[1] }}
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script setup lang="ts">
import { modelNavigateTo } from './tpl-v3'
import { getGoodsList } from '@/api/goods'
import { goodsFormatPrice } from '@/utils/filters'
import { px2rpx } from './px2rpx'
const props = defineProps(['res', 'enableBottomLoad', 'response', 'model'])
const goodsData = ref<any>({
  bigImage: uni.getSystemInfoSync().screenWidth,
  selected: {
    index: 0,
    val: ''
  },
  params: {
    pageNumber: 1,
    pageSize: 100,
    categoryId: ''
  },
  goodsData: [], //商品循环内容
  goodsResult: '', //es总返回内容
  goodsType: 'two', // 展示类型

  num: {
    three: 216,
    two: 350,
    ___big: 500,
    big: 500,
    scroll: 350,
    flag: 350
  }
})

watch(
  () => props.res,
  function (val: any) {
    // 监听父级的值 如果有值将值赋给selected
    if (val) {
      goodsData.value.goodsType = val.data.goodsType || 'two'
    }
  },
  {
    immediate: true
  }
)
onMounted(() => {
  uni.$on('onReachBottom', () => {
    if (
      goodsData.value.enableBottomLoad &&
      goodsData.value.goodsResult.totalElements >= goodsData.value.params.pageNumber * goodsData.value.params.pageSize
    ) {
      goodsData.value.params.pageNumber++
      initGoods(goodsData.value.res.data.list[0].titleWay[goodsData.value.selected.index])
    }
  })
})

onDeactivated(() => {
  uni.$off('onReachBottom')
})

function handleClick(item: any) {
  uni.navigateTo({
    url: `/pages/goods/product/detail?skuId=${item.id}&goodsId=${item.goodsId}`
  })
}
async function initGoods(val: any) {
  if (props.res.enableBottomLoad) goodsData.value.params.pageSize = 20
  val ? (goodsData.value.params.categoryId = val.bindCategory.id) : ''
  const res = await getGoodsList(goodsData.value.params)
  if (res.data.success) {
    goodsData.value.goodsResult = res.data.result
    const result = res.data.result.records
    goodsData.value.goodsData.push(...result)
  }
}
</script>

<style scoped lang="scss">
.noneBorder {
  border: none;
}

.shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.border {
  border: 1px solid #dcdcdc;
}

.layout {
  // background: #f9f9f9;
}

.goods-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.two,
.flag {
  width: 50%;
}

.goods-item {
  width: 50%;
  margin-bottom: 10px;
  border-radius: 0.4em;
  overflow: hidden;
}

.scroll {
  overflow-x: auto;
  width: 33.33%;

  > .goods-img {
    width: 216rpx;
    height: 216rpx;
  }

  > .goods-desc {
    width: 216rpx;
  }

  margin-bottom: 20rpx;
}

.scroll-list {
  flex-wrap: nowrap;
  display: -webkit-box;
  overflow-x: auto !important;
}

.___big {
  width: 100%;

  > .goods-img {
    width: 660rpx;
    height: 500rpx;

    > img {
      max-width: 660rpx !important;
      height: auto !important;
    }
  }

  > .goods-660rpx {
    width: 330px;
  }
}

.three {
  width: 33.33%;
  background: transparent;

  > .goods-img {
    width: 216rpx;
    height: 216rpx;
  }

  > .goods-desc {
    width: 216rpx;
  }

  margin-bottom: 20rpx;
}

.goods-img {
  background: #fff;
  position: relative;
  margin: 0 auto;
  // width: 158px;
  width: 94%;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;

  > img {
    width: 100%;
    height: 100%;
  }
}

.goods-desc {
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  width: 94%;
  background: #fff;
  padding: 8rpx 0 8rpx 8rpx;
  margin: 0 auto;
}

.no-clamp {
  overflow: auto !important;
  height: auto !important;
  font-size: 28rpx !important;
}

.goods-title {
  font-size: 24rpx;
  height: 67rpx;
  display: -webkit-box;
  font-weight: 500;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: block;
  overflow: hidden;
}

.goods-bottom {
  display: flex;
  font-weight: bold;
}

.goods-price {
  line-height: 2;

  > span {
    font-size: 42rpx;
  }
}

.goods-icon {
  right: 10rpx;
  top: 10rpx;
  position: absolute;
}

.goods-item-img-row {
  flex: 1;

  // width: 300rpx;
  // height: 300rpx;
  > img {
    // width: 100%;
    // height: 100%;
  }
}

.goods-item-one-row {
  width: 100%;
  background: #fff;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

.goods-item-desc-row {
  padding: 20rpx;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  > .goods-title {
    font-size: 24rpx;
    height: 76rpx;
    display: -webkit-box;
    font-weight: 500;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;
    display: block;

    overflow: hidden;
  }

  > .goods-bottom {
    display: flex;

    > .goods-price {
      line-height: 2;
    }
  }
}

.lineation-price {
  font-size: 24rpx;
  font-weight: normal;
}
</style>
